import { useEffect } from 'react';
import { useParams, useSelector, useDispatch } from 'dva';
import { useIntl, getLocale } from 'umi';
import moment from 'moment';

import VideoIcon from '../../components/meeting/VideoIcon';

import IconDate from '../../assets/icon/icon-date.png';
import IconAddress from '../../assets/icon/icon-address.png';

import styles from './detail.less';

const MeetingDetail = () => {
  const intl = useIntl();
  const { id } = useParams();
  const dispatch = useDispatch();
  const { meetingDetail = {} } = useSelector(({ index }) => index);

  const lang = () => getLocale()?.split('-')[0]?.toUpperCase();

  const formatDate = (date) => {
    return moment(date).format('YYYY/MM/DD');
  };

  useEffect(() => {
    // console.log(userInfo, 'userInfo')
    dispatch({
      type: 'index/apiGetMeetingDetail',
      payload: {
        id,
      },
    });
  }, []);

  console.log(lang());
  console.log(meetingDetail);

  return (
    <>
      {meetingDetail ? (
        <div className={styles.meetingDetail}>
          <div className={styles.title}>
            {lang() == 'ZH' ? meetingDetail.name : meetingDetail.nameEn}
          </div>
          <div className={styles.basicInfo}>
            <img
              src={IconDate}
              style={{
                width: 12,
                height: 12,
              }}
            />
            <span>
              {formatDate(meetingDetail.startDateTime)} - {formatDate(meetingDetail.endDateTime)}
            </span>
            <img
              src={IconAddress}
              style={{
                width: 12,
                height: 12,
                marginLeft: 16,
              }}
            />
            <span>{lang() == 'ZH' ? meetingDetail.address : meetingDetail.addressEn}</span>
          </div>

          <div
            style={{
              width: '100%',
              borderBottom: '1px solid #F3F3F3',
              marginTop: 23,
              marginBottom: 21,
            }}
          ></div>
          <div className={styles.detail}>
            <div
              style={{
                display: 'flex',
                justifyContent: 'flex-end',
              }}
            >
              <VideoIcon
                showLabel={true}
                meeting={meetingDetail}
                style={{
                  position: 'relative',
                  top: 0,
                  left: 0,
                  // position: 'fixed',
                  // right: 24,
                  // bottom: 30,
                  // right: 0,
                  // bottom: 0,
                  // left: 10,
                }}
              />
            </div>
            <div className={styles.copywriting}>
              <div
                dangerouslySetInnerHTML={{
                  __html:
                    meetingDetail &&
                    (lang() == 'ZH' ? meetingDetail.content : meetingDetail.contentEn),
                }}
              />
            </div>
          </div>
        </div>
      ) : (
        ''
      )}
    </>
  );
};

export default MeetingDetail;
